<template>
  <section class="data_screen_ct">
    <scroll-tip />
    <div class="dsren_ct_cont">
      <div class="scroll_auto">
        <div class="dsren_ct_top">
          <div class="dt_scrn_item">
            <div class="scritm_title">
              <span class="title">区域信息总览</span>
            </div>
            <div class="scritm_cont">
              <div class="map_tip">
                <b></b>
                <span>{{ btnMenuTxt }}</span>
              </div>
              <center-chart-1 ref="refCenterChart1" :chart-data="centerChart1Data" :cuttentMenu="cuttentMenu" />
            </div>
          </div>
          <div class="dt_scrn_item main_bg" v-loading="keyDataLoading">
            <div class="scritm_title">
              <span class="title">重点数据总览</span>
            </div>
            <div class="scritm_cont keydata">
              <div class="data_dot_list block">
                <ul>
                  <li>
                    <dl>
                      <dt></dt>
                      <dd>
                        <!-- <span>健康平均分 <b>90</b> 分</span> -->
                        <span>健康平均分 <b>{{ overviewInfo.healthyAvgScore }}</b> 分</span>
                      </dd>
                    </dl>
                  </li>
                  <li>
                    <dl>
                      <dt></dt>
                      <dd>
                        <!-- <span>健康基站占比 <b>0%</b></span> -->
                        <span>健康基站占比 <b>{{ overviewInfo.healthyStationPercentage }}</b>%</span>
                      </dd>
                    </dl>
                  </li>
                  <li>
                    <dl>
                      <dt></dt>
                      <dd>
                        <!-- <span>4G资源规模 <b>{{ formatNumber(97799) }}</b> 个</span> -->
                        <span>4G资源规模 <b>{{ formatNumber(overviewInfo.cell4gCount) }}</b> 个</span>
                      </dd>
                    </dl>
                  </li>
                  <li>
                    <dl>
                      <dt></dt>
                      <dd>
                        <!-- <span>5G资源规模 <b>{{ formatNumber(45221) }}</b> 个</span> -->
                        <span>5G资源规模 <b>{{ formatNumber(overviewInfo.cell5gCount) }}</b> 个</span>
                      </dd>
                    </dl>
                  </li>
                  <li>
                    <dl>
                      <dt></dt>
                      <dd>
                        <!-- <span>物理站点数量 <b>{{ formatNumber(11775) }}</b> 个</span> -->
                        <span>物理站点数量 <b>{{ formatNumber(overviewInfo.physicalStationCount) }}</b> 个</span>
                      </dd>
                    </dl>
                  </li>
                  <li>
                    <dl>
                      <dt></dt>
                      <dd>
                        <!-- <span>本月工单总数 <b>{{ formatNumber(2964) }}</b> 个</span> -->
                        <span>本月工单总数 <b>{{ formatNumber(overviewInfo.eomsOrderCount) }}</b> 个</span>
                      </dd>
                    </dl>
                  </li>
                  <li>
                    <dl>
                      <dt></dt>
                      <dd>
                        <!-- <span>未闭环工单数 <b>{{ formatNumber(125) }}</b> 个</span> -->
                        <span>未闭环工单数 <b>{{ formatNumber(overviewInfo.undoEomsOrder) }}</b> 个</span>
                      </dd>
                    </dl>
                  </li>
                  <li>
                    <dl>
                      <dt></dt>
                      <dd>
                        <!-- <span>投诉数量 <b>{{ formatNumber(236) }}</b> 个</span> -->
                        <span>投诉数量 <b>{{ formatNumber(overviewInfo.complaintCount) }}</b> 条</span>
                      </dd>
                    </dl>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="dsren_ct_bot">
          <div class="dt_scrn_item">
            <div class="scritm_title">
              <span class="title">移动业务网络质量满意度</span>
              <span class="time">24年01期</span>
            </div>
            <div class="scritm_cont">
              <center-chart-2 ref="refCenterChart2" :chart-data="centerChart2Data" />
            </div>
          </div>
          <div class=" dt_scrn_item" v-loading="healthRankLoading">
            <div class="scritm_title">
              <span class="title">健康排行榜(日平均)</span>
            </div>
            <div class="scritm_cont">
              <scroll-ranking-board :config="centerChart3Config" class="chart3_wrap" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from "vue";
// 组件
import CenterChart1 from "../components/chart/CenterChart1.vue";
import CenterChart2 from '../components/chart/CenterChart2.vue';
import ScrollTip from "../components/ScrollTip.vue";
// api相关
import { apiCommon, formatNumber, objIsEmpty } from "@/utils/index.js";
import * as screenApi from "@/api/screen/screen";
// datav
import { ScrollRankingBoard } from "@kjgl77/datav-vue3";
// 假数据
import { centerChart1DataZdjk, centerChart1DataWlzl, centerChart1DataGzgj, centerChart1DataJzhj, centerChart1DataJzsy, centerChart1DataYhgz } from "./chart/data/centerChart1Data.js";
import { querySatisfactionOverview, queryCountySatisfactionData } from '@/api/complain/complain';

import mittBus from "@/utils/mittBus"; // mitt

// store
import { screenDataStore } from '@/store/modules/screen.js'  // store
const screenStoreData = screenDataStore()

/** props 参数 */
const props = defineProps({
  btnMenuTxt: {
    type: String,
    default: '站点健康',
  },
});

watch(() => screenStoreData.districtCounty, val => {
  getCenterChart3Data()
})

let overviewInfo = ref({})
const cuttentMenu = ref('站点健康')

const refCenterChart1 = ref(null);
const centerChart1Data = ref([]);

const refCenterChart2 = ref(null)
const centerChart2Data = ref([])

const centerChart3Config = ref({
  data: [],
  unit: '分',
  sort: true,
  color: '#00CEE4'
});

let keyDataLoading = ref(false)
let healthRankLoading = ref(true)

mittBus.on('setLeftChart1Loading', () => {
  healthRankLoading.value = false
})

// 重点数据总览
const getOverviewInfo = async () => {
  keyDataLoading.value = true

  // 获取接口数据接口
  const resDataData = await apiCommon(screenApi.getOverviewInfo, err => {
    keyDataLoading.value = false
  });
  // console.log("重点数据总览 - 接口已完成", resDataData);

  overviewInfo.value = resDataData.data
  keyDataLoading.value = false
}

// 慈溪 余姚 海曙 江北 镇海 奉化 鄞州 北仑 宁海 象山
const setMapValue = (item, cx, yy, hs, jb, zh, fh, lz, bl, nh, xs) => {
  switch (item.name) {
    case '慈溪市':
      item.value = cx
      break
    case '余姚市':
      item.value = yy
      break
    case '海曙区':
      item.value = hs
      break
    case '江北区':
      item.value = jb
      break
    case '镇海区':
      item.value = zh
      break
    case '奉化区':
      item.value = fh
      break
    case '鄞州区':
      item.value = lz
      break
    case '北仑区':
      item.value = bl
      break
    case '宁海县':
      item.value = nh
      break
    case '象山县':
      item.value = xs
      break
  }
}

// 区域信息总览
const getCenterChart1Data = async (value) => {
  if (refCenterChart1.value) refCenterChart1.value.chatLoading("start")

  // 获取接口数据接口
  // const resDataData = await apiCommon(screenApi.getOverviewInfo);
  const resDataData = await apiCommon(querySatisfactionOverview, err => {
    refCenterChart1.value.chatLoading("end")
  });
  console.log("区域信息总览 - 接口未完成 - 使用其他接口模拟请求,并填充假数据", resDataData);
  refCenterChart1.value.chatLoading("end")

  // 当数据请求完成之后,开始自动点击
  const loopTime = 5000
  setTimeout(() => {
    mittBus.emit('autoClickMenu', loopTime);
  }, loopTime);


  if (value) {
    cuttentMenu.value = value
  }

  // 假数据
  switch (cuttentMenu.value) {
    case '站点健康':
      centerChart1Data.value = centerChart1DataZdjk
      break;
    case '网络质量':
      centerChart1Data.value = centerChart1DataWlzl
      break;
    case '故障告警':
      centerChart1Data.value = centerChart1DataGzgj
      break;
    case '基站环境':
      centerChart1Data.value = centerChart1DataJzhj
      break;
    case '价值收益':
      centerChart1Data.value = centerChart1DataJzsy
      break;
    case '用户感知':
      centerChart1Data.value = centerChart1DataYhgz
      break;
    default:
      centerChart1Data.value = centerChart1DataZdjk
      break;
  }

  centerChart1Data.value.forEach(item => {
    // console.log('item', item)

    if (value === '站点健康') {
      delete item.value
    }

    // 设置地图的value值
    // 地图的value值决定地图板块的颜色
    // 比如故障告警,根据投诉数量来决定颜色,value值便为每个区的投诉数量
    switch (value) {
      case '网络质量':
        // 慈溪 余姚 海曙 江北 镇海 奉化 鄞州 北仑 宁海 象山
        // 假数据
        setMapValue(item, 11, 22, 33, 444, 55, 66, 77, 88, 99, 22)
        // 真实数据 - 设置点击网络质量时地图颜色按照data1的字段来动态生成颜色
        // item.value = item.data1
        break
      case '故障告警':
        // 慈溪 余姚 海曙 江北 镇海 奉化 鄞州 北仑 宁海 象山
        setMapValue(item, 22, 33, 55, 122, 11, 166, 77, 122, 199, 222)
        // item.value = item.data2
        break
      case '基站环境':
        // 慈溪 余姚 海曙 江北 镇海 奉化 鄞州 北仑 宁海 象山
        setMapValue(item, 111, 222, 55, 444, 88, 66, 66, 111, 99, 44)
        // item.value = item.data3
        break
      case '价值收益':
        // 慈溪 余姚 海曙 江北 镇海 奉化 鄞州 北仑 宁海 象山
        setMapValue(item, 11, 22, 66, 444, 288, 66, 112, 88, 33, 12)
        // item.value = item.data4
        break
      case '用户感知':
        // 慈溪 余姚 海曙 江北 镇海 奉化 鄞州 北仑 宁海 象山
        setMapValue(item, 111, 55, 111, 55, 155, 66, 77, 233, 44, 12)
        // item.value = item.data5
        break
    }
  })

  refCenterChart1.value && refCenterChart1.value.resetChart()
};

const setMenuBtn = (value) => {
  // console.log('setMenuBtn', value)

  getCenterChart1Data(value)  // 中间地图重新渲染
}

// 移动业务网络质量满意度
const getCenterChart2Data = async () => {
  // 获取接口数据接口

  querySatisfactionOverview().then(res => {
    const date = new Date(res.data.endTime);
    var year = date.getFullYear();
    var month = ("0" + (date.getMonth() + 1)).slice(-2);
    var day = ("0" + date.getDate()).slice(-2);
    // 格式化输出
    var endTime = year + "-" + month + "-" + day;

    const params = {
      endTime: endTime
    }
    queryCountySatisfactionData(params).then(res => {
      let data = res.data
      let list = []
      //遍历data
      data.forEach(item => {
        let temp = {
          name: item.name,
          satisfaction: item.networkSatisfaction,
          leadership: item.networkSatisfactionLead
        }
        list.push(temp)
      })

      centerChart2Data.value = list
    }).catch(err => {
      refCenterChart2.value.chatLoading("end")
    })
  })
}

// 健康排行榜
const getCenterChart3Data = async () => {
  if (screenStoreData.districtCounty.length === 0) {
    return
  }

  screenStoreData.districtCounty.forEach(item => {
    centerChart3Config.value.data.push({
      name: item.name,
      value: item.dailyAverage
    })
  })
};

// 重置图表
const resetChart = () => {
  // refCenterChart1.value && refCenterChart1.value.resetChart()
  refCenterChart2.value && refCenterChart2.value.resetChart()
}

// 初始化图表数据
const initChartData = () => {
  getOverviewInfo()
  getCenterChart1Data();
  getCenterChart2Data();
  getCenterChart3Data();
};
initChartData();

/**
 * 暴露方法
 */
defineExpose({
  resetChart,
  setMenuBtn
})
</script>

<style lang="scss" scoped>
.scritm_cont {
  .map_tip {
    position: relative;
    left: 12px;
    top: 10px;
    width: 100px;
    height: 26px;


    b {
      display: block;
      width: 100%;
      height: 100%;
      transform: skew(-20deg);
      background: linear-gradient(to right, #1F4F8A, #0f275a);
      border-radius: 5px;
    }

    span {
      position: absolute;
      display: block;
      width: 100%;
      left: 51%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-family: YouSheBiaoTiHei;
      font-size: 16px;
      color: #4ABEFE;
      line-height: 100%;
      text-align: center;
    }
  }

  &.keydata {
    .data_dot_list {
      &.block {
        height: 100%;

        ul {
          flex-direction: column;
          height: 100%;

          li {
            position: relative;
            height: calc(100% / 8 - .6%);

            dl {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }

  :deep .chart3_wrap {
    width: 97%;
    // margin: 0 auto;
    cursor: pointer;

    .row-item {
      // margin-bottom: -3px;

      .ranking-info {
        .rank {
          color: #4bbefe;
        }

        .info-name {}

        .ranking-value {}
      }

      .ranking-column {
        .inside-column {
          // background: linear-gradient(to right, rgb(21 60 110 / 30%), #507AFC);
          background: linear-gradient(to right, rgba(22, 62, 112, 0), #507AFC);
          // { offset: 1, color: 'rgba(22, 62, 112, 0)' },
        }

        .shine {
          background: rgb(75 190 254 / 30%)
        }
      }
    }
  }
}
</style>
